<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" name="" id="" class="ipt">
    <button class="send">按钮</button>
    <ul>
        <!-- <li>
            <p></p>
            <button>删除</button>
        </li> -->
    </ul>
    <script>
        var arr = [
            { id: 1, title: '今天有业' },
            { id: 2, title: '今天晚上要xx吃饭' },
            { id: 3, title: '晚上睡觉之前xx' },
            { id: 4, title: '今天有三个作业' },
        ]
        /*
            1- 加载列表-- 遍历数组 拼接字符串--赋值 到 ul中
                --加载列表功能封装成一个函数
            2- 添加功能-- 点击发布按钮-获取输入框的值--创建对象--添加到数组中--调用加载列表函数

            3- 事件委托 给 列表添加点击事件，判断事件源是不是删除按钮--
        
        */
        // 1- 加载列表-- 遍历数组 拼接字符串--赋值 到 ul中

        function loadList() {
            let lisStr = '';
            arr.forEach(v => {
                let liStr = `<li>
                    <p>${v.title}</p>
                    <button class="del" data-id="${v.id}">删除</button>
                </li>`;
                lisStr += liStr
            });
            document.querySelector('ul').innerHTML = lisStr;
        }
        loadList()
        // 2- 添加功能-- 点击发布按钮-获取输入框的值--创建对象--添加到数组中--调用加载列表函数
        let btn = document.querySelector('.send');
        let ipt = document.querySelector('.ipt');
        btn.onclick = () => {
            let title = ipt.value;
            let idArr = arr.map(v => v.id);
            let maxId = Math.max(...idArr)
            let id = maxId === -Infinity ? 1 : maxId + 1;
            let obj = { title, id };
            // arr.push(obj);
            arr.unshift(obj);
            loadList()
            ipt.value = ''
        }
        // 3- 事件委托 给 列表添加点击事件，判断事件源是不是删除按钮--
        let ul = document.querySelector('ul');
        ul.onclick = function (evt) {
            if (evt.target.className == 'del') {
                //点击事件的代码
                console.log(evt.target.dataset.id);
                // 删除数组的元素
                arr = arr.filter(v => v.id != evt.target.dataset.id)
                // 加载列表
                loadList()
            }
        }



    </script>

</body>

</html>